<template>
  
  <div><br>
  <el-form :model="form" label-width="auto" style="max-width: 750px">
    <el-form-item label="最晚可预订时间:">
      <el-select v-model="form.maxTimes" placeholder="今日" style="width: 80px;">
        <el-option label="今日" :value="1" />
        <el-option label="次日" :value="2" />
      </el-select>
      <el-time-picker v-model="form.maxTime" placeholder="23:59" style="width: 80px;"/>
      <span style="color:grey; font-size:10px;">超过该时间,客户不能预订当天房间</span>
    </el-form-item>

    <el-form-item label="最多可预订数:">
    <el-input v-model="form.maxNumber" style="width: 200px;"/><el-button style="background-color:gainsboro;">个</el-button><span style="color:grey; font-size:10px;">单个订单最多可预订房间数,不填则不限</span>
    </el-form-item>

    <el-form-item label="最多可预订天数:">
    <el-input v-model="form.maxDays" style="width: 200px;"/><el-button style="background-color:gainsboro;">天</el-button><span style="color:grey; font-size:10px;">订单最多可预订房晚，不填则默认60天:可填写1~60天</span>
  </el-form-item>

    <el-form-item label="预定日期范围:">
      <el-input v-model="form.scheduledTimeRange" style="width: 200px;"/><el-button style="background-color:gainsboro;">天</el-button><span style="color:grey; font-size:10px;">订房日期范围;可填写1~85天。例:若今天是9号,填写2天,可订11号前离店的订单</span>
    </el-form-item>

    <el-form-item label="预定确认">
      <el-radio-group v-model="form.bookingConfirmation">
        <el-radio :value="1">不需要,系统自动确认并<el-select v-model="form.yudings" placeholder="分配房号" style="width: 120px;">
        <el-option label="分配房号" :value="1" />
        <el-option label="不分配房号" :value="2" />
      </el-select><br> </el-radio>

        <el-radio :value="2">需要,商家在后台确认预定并<el-select v-model="form.yuding" placeholder="分配房号" style="width: 120px;">
        <el-option label="分配房号" :value="1" />
        <el-option label="不分配房号" :value="2" />
      </el-select>  ,且超过 <el-input v-model="form.fenzhong" style="width: 200px;"/><el-button style="background-color:gainsboro;">分钟</el-button><span style="color:grey; font-size:10px;">后未处理则自动</span> <el-select v-model="form.yuyue" placeholder="确认预订" style="width: 120px;">
        <el-option label="确定预订" :value="1" />
        <el-option label="拒绝预订" :value="2" />
      </el-select> <el-tooltip placement="bottom" >
    <template #content> 若使用汇付天下支付模式且启用住宿订单<br />则可能出现以下情况:住宿订单自动拒绝,<br />发起退款操作。而汇付账号余额每日凌晨;<br />动提现到您的银行账户中，汇付账号余额<br />款，若订单拒绝当天账户没有进账或商户<br />后台充值则此时订单退款将会失败 </template>
    <el-button>注意事项</el-button>
  </el-tooltip></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="预订须知:">
    <el-input
    v-model="form.scheduledNotice"
    style="width: 440px"
    :rows="5"
    type="textarea"
  />
</el-form-item>

<el-form-item label="预订须知确认">
      <el-radio-group v-model="form.scheduledNoticeConfirm">
        <el-radio value="false">关闭</el-radio>
        <el-radio value="true">开启</el-radio>
      </el-radio-group>
      <span style="color:grey; font-size:10px;">启用后,订单提交前,会弹窗告知用户预订须知,需用户手动确认</span>
    </el-form-item>

    <el-form-item label="预留信息">
    <el-switch
    v-model="form.reserveInformationState"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  /><span style="color:grey; font-size:10px;">启用后,订单提交前,会弹窗告知用户预订须知,需用户手动确认</span>
</el-form-item>
   <div>
      <el-table :data="tableData" style="width:40%;">
    <el-table-column prop="informationName" label="信息名称" width="150" />
    
    <el-table-column  label="操作" min-width="120">
      <template #default="{row}">
        <el-button link type="primary" size="small" @click="updates(row)">
          编辑
        </el-button>
        <el-button link type="primary" size="small" @click="deletes(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="预留信息" width="500">
    <el-form :model="forms">
      <el-form-item label="信息名称" :label-width="80">
        <el-input v-model="forms.informationName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="提示文案" :label-width="80">
        <el-input v-model="forms.alertInformation" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="clickupdate()">
          确认修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</div>




    <div style="text-align:center;">
      <el-button type="primary"  @click="LodgingSetupadd()">保存</el-button>
    </div>

  </el-form>
</div>


</template>


<script lang="ts" setup>
import { reactive,ref,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()
const tableData = ref([])
const dialogFormVisible= ref(false)

const forms = reactive({
  reserveInformationId:'',
  informationName:'',
  alertInformation:'',

})

// do not use same name with ref
const form = reactive({
  yuyue:"",
  yuding:"",
  fenzhong:'',
  yudings:"",
  maxTime:'',
  maxNumber: '',
  maxDays: '',
  scheduledTimeRange: '',
  bookingConfirmation: '',
  scheduledNotice: '',
  scheduledNoticeConfirm:'',
  reserveInformationState: '',
    maxTimes:""
})


const LodgingSetupadd = () => {
   axios({
    url:"https://localhost:44392/PostBasicInformation",
    method:"post",
    data:form
   }).then(res=>{
    if(res.data.code==200)
   {
    ElMessage({
      message: '保存成功',
      type: 'success',
    })
    
   }
   })
}


onMounted(()=>{
  getlist()
})

//获取预留信息列表
const getlist = () => {
  axios({
    url:"https://localhost:44392/GetReserveInformation",
    method:"get",
    params:{
      
    }
  }).then(res=>{
    console.log(res)
    tableData.value = res.data.data
  })
}

//删除预留信息
const deletes=(ReserveInformationId:any)=>{

 axios({
  url:"https://localhost:44392/DeleteReserveInformation",
  method:"Delete",
  params:{ReserveInformationId:ReserveInformationId}
 }).then(res=>{
  if(res.data.code==200)
  {
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
    getlist()
  }else
  {
    ElMessage({
      message: '删除失败',
      type: 'error',
    })
  }
  
 })
}


//弹框回显数据
const updates=(row:any)=>{
  console.log(row);
  dialogFormVisible.value=true
  forms.informationName=row.informationName
  forms.alertInformation=row.alertInformation
  forms.reserveInformationId=row.id
  console.log(forms)
}


//修改预留信息
const clickupdate=()=>{
  console.log(forms)
  axios.put("https://localhost:44392/PutReserveInformation",forms).then(res=>{
    console.log(res)
    if(res.data.isSuc)
  {
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    dialogFormVisible.value=false
    getlist()
  }
  })
  
}
</script>
